<template>
    <c-list-template title="日志记录">
        <template slot="search">
            <div class="flex">
                <div class="search-part" style="width: 80%">
                    <span class="search-item">
                        <span class="search-title mr-lg">{{ $t("global.timeRange") }}</span>
                        <el-date-picker :picker-options="pickerOptions" v-model="search.timeStart" type="datetime" :placeholder="$t('global.startTime')" align="right" class="mr-lg" value-format="yyyy-MM-dd HH:mm:ss">
                        </el-date-picker>
                        <el-date-picker :picker-options="pickerOptions" v-model="search.timeEnd" type="datetime" :placeholder="$t('global.endTime')" align="right" value-format="yyyy-MM-dd HH:mm:ss"></el-date-picker>
                    </span>
                    <span class="ml-lg search-item mr-lg">
                        <span class="search-title">账号</span>
                        <el-input v-model="search.userId" clearable @clear="handleSearch" :placeholder="$t('global.inputAccount')" class="ml-lg"></el-input>
                    </span>
                </div>
                <div class="flex-x-end" style="width: 20%">
                    <el-button icon="el-icon-search" type="primary" @click="handleSearch()">搜索</el-button>
                    <el-button icon="el-icon-delete" @click="handleReset">重置</el-button>
                </div>
            </div>
        </template>

        <template slot="list">
            <el-table :header-cell-style="{ background: '#F1F1F1', color: '#092132' }" :data="list">
                <el-table-column align="center" type="index" label="序号" width="80"></el-table-column>
                <el-table-column align="center" prop="id" label="ID" width="100"></el-table-column>
                <el-table-column align="center" prop="userId" :label="$t('global.account')" width="200"></el-table-column>
                <el-table-column align="center" prop="logName" :label="$t('logging.apiDescription')"></el-table-column>
                <el-table-column align="center" prop="api" label="API"></el-table-column>
                <el-table-column align="center" prop="ip" label="IP"></el-table-column>
                <el-table-column align="center" :label="$t('global.time')">
                    <template slot-scope="scope">
                        <span>{{ scope.row.timeCreate | dateYMDHMSFormat }}</span>
                    </template>
                </el-table-column>
                <el-table-column align="center" prop="method" :label="$t('logging.clientType')"></el-table-column>
                <el-table-column align="center" :label="$t('global.status')" width="130">
                    <template slot-scope="scope">
                        <span v-if="scope.row.succeed === 1">{{ $t("global.normal") }}</span>
                        <span v-if="scope.row.succeed === 9">{{ $t("global.suspended") }}</span>
                    </template>
                </el-table-column>
            </el-table>
        </template>
        <template slot="pagination">
            <el-pagination background :total="total" layout="total, sizes, prev, pager, next, jumper" :page-size="pageParams.size" @current-change="getList" :current-page.sync="pageParams.current">
            </el-pagination>
        </template>
    </c-list-template>
</template>

<script>
export default {
    data () {
        return {
            pageParams: {
                current: 1,
                size: 10,
            },
            search: {
                timeStart: "",
                timeEnd: "",
                userId: "",
            },
            total: 0,
            pickerOptions: {
                disabledDate (time) {
                    return time.getTime() > Date.now();
                },
            },
            list: [],
        };
    },
    mounted () {
        this.getList();
    },
    methods: {
        handleReset () {
            this.search = {};
            this.pageParams = {
                current: 1,
                size: 10,
            };
            this.getList();
        },
        handleSearch () {
            this.pageParams.current = 1;
            this.getList();
        },
        getList () {
            this.$post({
                url: "/log/operation",
                params: {
                    ...this.search,
                    ...this.pageParams,
                },
            }).then((res) => {
                this.list = res.records;
                this.total = res.total;
            });
        },
    },
};
</script>
<style scoped lang="scss">
.el-input {
    display: inline-block;
    width: 195px;
}
</style>
